<template>
  <ManagePage
    v-model:column-option="columnOption"
    :search-option="searchOption"
    :api-option="apiOption"
  />
</template>

<script>
import { h } from 'vue'
import { conversationList, conversationDelete } from '@/api/conversation.js'
import ManagePage from '@/components/ManagePage/index.vue'
import SelectConfirm from './components/SelectConfirm.vue'

export default {
  name: 'BlogView',
  components: { ManagePage },
  data () {
    return {
      // 搜索类型
      searchOption: [
        { label: '默认', value: '' },
        { label: '类型', value: 'type' }
      ],
      // 格式组件
      columnOption: [
        { field: 'type', cname: '类型', cshow: true, align: 'center', showname: '类型', clock: false, width: 100 },
        { field: 'ai_overview', cname: 'ai对话简述', cshow: true, align: 'center', showname: 'ai对话简述', clock: false, width: 100 },
        { field: 'ai_target', cname: 'ai对话目标', cshow: true, align: 'center', showname: 'ai对话目标', clock: false, width: 100 },
        { field: 'user_target', cname: '用户对话目标', cshow: true, align: 'center', showname: '用户对话目标', clock: false, width: 160 },
        { field: 'unread', cname: '未读消息数', cshow: true, align: 'center', showname: '未读消息数', clock: false, width: 100 },
        { field: 'created_at', cname: '创建时间', cshow: true, align: 'center', showname: '创建时间', clock: false, width: 'auto' },
        { field: 'updated_at', cname: '更新时间', cshow: true, align: 'center', showname: '更新时间', clock: false, width: 'auto' },
        { field: 'operation', cname: '操作', cshow: true, align: 'center', showname: '操作', clock: false, width: 'auto' }
      ],

      apiOption: {
        primaryKey: 'uuid',
        create: {
          type: 'callback',
          callback: () => this.add()
        },
        update: {
          type: 'callback',
          callback: (row) => this.change(row)
        },
        del: {
          type: 'api',
          api: conversationDelete
        },
        list: {
          type: 'api',
          api: conversationList
        }
      }
    }
  },
  methods: {
    // 添加
    add () {
      const selectConfirmComponent = h(SelectConfirm)
      /* $msgbox疑似会缓存组件导致无法释放，不应该用其中的挂载、卸载生命周期，不可靠 */
      this.$msgbox({
        title: '消息',
        message: selectConfirmComponent,
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        callback: (action, instance) => {
          const type = selectConfirmComponent.component?.data?.selectValue || ''
          if (action === 'confirm' && type === 'ai') {
            setTimeout(() => {
              window.open(`${import.meta.env.VITE_APP_ROUTE_PATH}/application/open-ai`)
            }, 200)
          }
        }
      })
    },
    // 查看/修改
    change (row) {
      if (row.type === 'ai') {
        window.open(`${import.meta.env.VITE_APP_ROUTE_PATH}/application/open-ai?uuid=${row.uuid}`)
      } else {
        this.$message(row.type)
      }
    },
    // 删除
    del (row) {
      const msg = `删除${row.uuid}`
      this.$confirm(`是否${msg}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await conversationDelete({ uuid: row.uuid })
        this.query.page = 1
        this.init()
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.conversation-view{
  display: flex;
  flex-direction: column;
}
.row{
  padding: 0 0 15px 0;
}
.operation{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
